<template>
	<view class="featuredTopics">
		<uniCard>
			<template #leftHeader>专题精选</template>
			<template #rightHeader>More+</template>
			<template #>
				<view class="topics">
					<singleTopic v-for="item of featuredTopicsUrl" :imgData="item" :key="item._id"></singleTopic>
					<singleTopic :isShowTopic="false"></singleTopic>
				</view>
			</template>
		</uniCard>
	</view>

</template>

<script setup>
	import uniCard from '../../components/uniCard.vue'

	import singleTopic from '../../components/singleTopic.vue'

	import {
		ref
	} from 'vue'

	import {
		getFeaturedTopicsApi
	} from '../../Api/index/indexLayOut.js'

	//定义专题精选数据
	const featuredTopicsUrl = ref([])

	async function getTopic() {
		const res = await getFeaturedTopicsApi(true)
		featuredTopicsUrl.value = res.data
		console.log("专题精选数据获取")
	}
	getTopic()

	//暴露出组件变量、函数等
	defineExpose({
		getTopic
	})
</script>

<style lang="scss" scoped>
	.featuredTopics {
		margin-top: 60rpx;

		.topics {
			padding: 0 25rpx;
			display: grid;
			gap: 15rpx;
			grid-template-columns: repeat(3, 1fr);
		}
	}
</style>